<template>
  <!-- 新增部门的弹层 -->
  <el-dialog :title="val" :visible="showDialog" @close="btnCancel">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form
      ref="deptForm"
      label-width="120px"
      :model="formdata"
      :rules="rules"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formdata.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formdata.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formdata.manager" style="width:80%" placeholder="请选择" @focus="getEmployeeSimple">
          <!-- 需要循环生成选项   这里做一下简单的处理 显示的是用户名 存的也是用户名-->
          <el-option v-for="item in peoples" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formdata.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6" class="A">
        <el-button
          type="primary"
          size="small"
          @click="btnOk"
        >确定</el-button>
        <el-button
          size="small"
          @click="btnCancel"
        >取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { getDepartments, addDepartments, getDepartDetail, updateDepartments } from '@/api/departments'
import { getEmployeeSimple } from '@/api/employees'
export default {
  name: 'Add',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    // 2. 操作部门的数据对象
    treeNode: {
      type: Object,
      default: null
    }
  },
  data() {
    /**
     * 校验同步部门下有没有相同的部门名称
     */
    const checkNameRepeat = async(rule, value, callback) => {
      // 先要获取最新的组织架构数据
      const { depts } = await getDepartments()
      // depts是所有的部门数据
      // 如何去找技术部所有的子节点
      // 1. 判断是编辑还是添加
      console.log(this.formdata.id)
      let isRepeat = false
      if (this.formdata.id) { // 编辑
        // 找到当前编辑的部门的所有同级部门, 再去查找是否有相同的部门名称
        // 重点: 要排除自己
        console.log(1111)
        isRepeat = depts.filter(item => item.id !== this.formdata.id && item.pid === this.formdata.pid).some(item => item.name === value)
      } else { // 添加
        // 找到所有的同级部门, 去查找是否有相同的部门名称
        isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
      }
      // 3. 返回结果
      isRepeat ? callback(new Error(`同级部门下已经有 ${value} 的部门了`)) : callback()
    }

    /**
     * 查找组织架构下是否有相同的部门编码
     */
    const checkCodeRepeat = async(rule, value, callback) => {
      // 先要获取最新的组织架构数据
      // 1. 先要获取最新的组织架构数据
      const { depts } = await getDepartments()
      // 2. 判断是添加还是编辑
      let isRepeat = false
      if (this.formdata.id) { // 编辑
        isRepeat = depts.some(item => item.id !== this.formdata.id && item.code === value && value)
      } else { // 添加
        isRepeat = depts.some(item => item.code === value && value) // 这里加一个 value不为空 因为我们的部门有可能没有code
      }
      isRepeat ? callback(new Error(`组织架构中已经有部门使用${value}编码`)) : callback()
    }

    return {
      formdata: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '部门名称只能是1-10位', trigger: ['blur', 'change'] },
          { validator: checkNameRepeat, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '部门编码只能是1-10位', trigger: ['blur', 'change'] },
          { validator: checkCodeRepeat, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍只能是1-300位', trigger: ['blur', 'change'] }
        ]
      },
      peoples: [] // 下拉选中部门负责人接收获取的员工简单列表的数据
    }
  },
  computed: {
    val() {
      return this.formdata.id ? '编辑部门' : '新增部门'
    }
  },
  methods: {
    // 获取员工简单列表数据
    async  getEmployeeSimple() {
      this.peoples = await getEmployeeSimple()
    },
    // 2. 点击确认按钮
    btnOk() {
      // 2.1 整体校验
      this.$refs.deptForm.validate(async isOk => {
        if (!isOk) return
        if (this.formdata.id) {
          // 有id是编辑
          await updateDepartments(this.formdata)
          this.$message.success('编辑部门成功')
        } else {
          // 没有id是添加部门
          // 2.2 调用接口
          await addDepartments({ ...this.formdata, pid: this.treeNode.id })
          // 2.3 提示添加成功
          this.$message.success('添加部门成功')
        }

        // 2.4 通知父组件更新数据
        this.$emit('addDept')
        // 2.5 关闭弹窗
        // 子组件 update:固定写法 (update:props名称, 值)
        this.$emit('update:showDialog', false)
      })
    },
    btnCancel() {
      //  将fromdata里面的数据重置
      this.formdata = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      // 点击取消按钮时候重置校验字段
      this.$refs.deptForm.resetFields()
      // 关闭弹窗
      // 子组件 update:固定写法 (update:props名称, 值)
      this.$emit('update:showDialog', false)
    },
    // 调用获取部门详情的接口，将需要编辑的部门显示已有的信息
    async getDepartDetail(id) {
      const res = await getDepartDetail(id)
      console.log(res)
      this.formdata = res
    }
  }
}
</script>
<style scoped>
.el-col{
    width: auto !important;
  }

</style>
